/*
 * Dialog box component
 *
 * Usage:
 *
 *    <div class="it-box it-dialog lg-shadow modal">
 *        <div class="body"></div>
 *    </div>
*/


/* Dialogs holder */

.it-dialog-holder {
    align-items: center;
    background: var(--main-overlay-strong);
    border: 0;
    color: var(--main-neutral-primary);
    display: flex;
    font: var(--text-caption-lg);
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    overflow: hidden;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    outline: none;
    padding: 24px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1111;
}

.it-dialog-holder.msg-holder {
    z-index: 1112;
}

.it-dialog-holder.prioritize {
    z-index: 1201;
}

.it-dialog-holder::backdrop {
    background-color: transparent;
}


/* Dialog */

.it-dialog {
    border-radius: var(--radius-i-dialog);
    overflow: hidden;
    position: relative;
    max-height: 100%;
}

.it-dialog > .body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
}

.it-dialog > .body > header {
    align-items: center;
    display: inline-flex;
    width: 100%;
}

.it-dialog > .body > header h5 {
    flex: 1 1 auto;
    text-align: center;
}

.it-dialog button.close-btn {
    --icon-size: 32px;
    border-radius: 100%;
    padding: 0;
    position: absolute;
    right: 0;
    margin: 32px;
    top:0;
    z-index: 1;
}

.it-dialog button.close-btn:hover::before,
.it-dialog button.close-btn:focus::before {
    background-color: transparent;
}

.rtl .it-dialog button.close-btn {
    left: 0;
    right: auto;
}

.it-dialog .scroll-area {
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
}

.it-dialog .scroll-area > .content-body {
    overflow: hidden;
    overflow-y: auto;
    padding: 24px 48px;
}


/* Dialog. Content */

.it-dialog > .body > .split-content {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.it-dialog > .body > .split-content > .content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(50% - 12px);
}

.it-dialog .split-content > .content.illustration {
    background-color: var(--main-surface-secondary);
    border-radius: var(--radius-i-box);
}

.it-dialog .split-content > .content.illustration .icon {
    max-height: 100%;
    max-width: 100%;
}

.it-dialog .content.illustration .illustration-body {
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;
    padding: 12px;
    width: 100%;
}


/* Dialog. Modal type */

.it-dialog.modal {
    border-radius: var(--radius-i-box);
    max-width: 640px;
    width: auto;
}

.it-dialog.modal > .body > header {
    align-items: center;
    display: flex;
    width: 100%;
}

.it-dialog.modal > .body > header > *:first-child {
    flex: 1 1 auto;
    text-align: start;
}

.it-dialog.modal footer {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.it-dialog.modal  footer.end-align {
    justify-content: end;
}

.it-dialog.modal footer > button {
    flex: 0 1 auto;
}

.it-dialog.modal  footer.fw-buttons > button {
    flex: 1 1 calc(50% - 6px);
}

.it-dialog.modal footer > button + button {
    margin: 0;
    margin-inline-start: 12px;
}

.it-dialog.modal > .body > .content {
    display: grid;
    gap: 24px;
}

.it-dialog.modal > .body > .content > p {
    padding: 24px 0 0;
    text-align: start;
}

.it-dialog.modal > .body > .content > p:empty {
    padding: 0;
}

.it-dialog.modal .content h5 {
    color: var(--main-neutral-primary);
}

.it-dialog.modal .content p strong {
    color: var(--main-neutral-primary);
    font-weight: bold;
}

.it-dialog.modal > .body > .content > .tip {
    color: var(--main-neutral-secondary);
    font: var(--text-caption-md);
}


/* Dialog holder. Blurred bg */

.it-dialog-holder.blur {
    -webkit-backdrop-filter: blur(128px);
    backdrop-filter: blur(128px);
    background: none;
}


/* Dialog. Ghost type */

.it-dialog-holder.ghost {
    -webkit-backdrop-filter: blur(48px);
    backdrop-filter: blur(48px);
    background: var(--main-surface-secondary-op-0-8);
    overflow-y: auto;
    padding: 0;
}

.it-dialog-holder.ghost .it-dialog {
    background: none;
    border-radius: 0;
}


/* Dialog. Side type  */

.it-dialog-holder.side {
    -webkit-backdrop-filter: blur(48px);
    backdrop-filter: blur(48px);
    background: var(--main-surface-secondary-op-0-8);
    padding: 0;
}

.it-dialog-holder.side .it-dialog {
    background: var(--main-surface-primary);
    border-radius: 0;
    height: 100%;
    margin-inline-start: auto;
    transform: translateX(100%);
}

.it-dialog-holder.side:not(.hidden) .it-dialog {
    animation: rtl-slide .3s forwards;
}

@keyframes rtl-slide {
    100% {
        transform: translateX(0);
    }
}

.it-dialog-holder.side .it-dialog > .body {
    overflow-y: auto;
    padding: 36px;
}

.it-dialog-holder.side .it-dialog > .body > .content {
    flex: 1 1 auto;
}

.it-dialog-holder.side .it-dialog > .body > header,
.it-dialog-holder.side .it-dialog > .body > footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
}


/* Sizes */

/* Sizes. Full height size */

.it-dialog.fh-size {
    height: 100%;
}

/* Sizes. Modal. Medium size */

.it-dialog.modal.md-size {
    max-width: 448px;
    width: 100%;
}




/* Adaptive layout */

@media only screen and (max-width: 960px) {

    .it-dialog .split-content > .content.illustration {
        display: none;
    }

    .it-dialog > .body > .split-content > .content {
        width: 100%;
    }

}
